<template>
  <div class="media-section">
    <div class="table-container">
      <el-table 
        :data="paginatedMediaList" 
        style="width: 100%" 
        :flexible="true"
        :max-height="500"
      >
        <el-table-column prop="id" label="ID" min-width="100" align="center" />
        <el-table-column prop="type" label="类型" min-width="100" show-overflow-tooltip>
          <template #default="{ row }">
            <el-tag v-if="row.type === 1" type="primary">图片</el-tag>
            <el-tag v-else-if="row.type === 2" type="success">视频</el-tag>
            <el-tag v-else-if="row.type === 3" type="warning">对话</el-tag>
            <el-tag v-else>{{ row.type }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="title" label="标题" min-width="100" align="center" />
        <el-table-column prop="prompt" label="生成提示词" min-width="150" align="center" />
        <el-table-column prop="result_url" label="结果文件URL" min-width="100" show-overflow-tooltip />
        <el-table-column prop="params" label="生成参数" min-width="150" show-overflow-tooltip />
        <el-table-column prop="pointsUsed" label="消耗积分" min-width="100" align="center" />
        <el-table-column prop="status" label="状态" min-width="100" align="center">
          <template #default="{ row }">
            <el-tag v-if="row.status === 0">生成中</el-tag>
            <el-tag v-else-if="row.status === 1" type="success">成功</el-tag>
            <el-tag v-else-if="row.status === 2" type="danger">失败</el-tag>
            <el-tag v-else>{{ row.status }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" min-width="200" align="center">
          <template #default="{ row }">
            <el-button 
              size="small" 
              type="primary" 
              @click="previewMedia(row)"
              plain
              >预览</el-button>
            <el-button 
              size="small" 
              type="danger" 
              @click="deleteMedia(row)"
              plain
              style="margin-left: 12px"
              >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    
    <!-- 分页组件 -->
    <div class="pagination-container">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 50, 100]"
        :total="mediaList.length"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, computed, watch } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import contents from "../api/contents.js";

const props = defineProps({
  mediaList: {
    type: Array,
    required: true
  }
});

const emit = defineEmits(['updateMediaList']);

// 分页相关数据
const currentPage = ref(1);
const pageSize = ref(20);

// 计算分页后的数据
const paginatedMediaList = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value;
  const end = start + pageSize.value;
  return props.mediaList.slice(start, end);
});

// 分页事件处理
const handleSizeChange = (val) => {
  pageSize.value = val;
  currentPage.value = 1; // 重置到第一页
};

const handleCurrentChange = (val) => {
  currentPage.value = val;
};

// 监听数据变化，重置分页
watch(() => props.mediaList, () => {
  currentPage.value = 1;
}, { deep: true });

const previewMedia = (media) => {
  ElMessage.info(`预览文件: ${media.title || media.name}`);
};

const deleteMedia = (media) => {
  ElMessageBox.confirm(`确定要删除记录 ${media.title || media.name} 吗？`, "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    // 这里应该调用API删除媒体文件
    ElMessage.success("删除成功");
    // 通知父组件更新媒体列表
    emit('updateMediaList');
  });
};
</script>

<style scoped>
/* 表格容器样式 - 支持横向滚动 */
.table-container {
  width: 100%;
  overflow-x: auto;
}

/* 确保表格占满容器宽度 */
.table-container :deep(.el-table) {
  width: 100% !important;
  min-width: auto !important;
}

/* 表格列内容溢出处理 */
.table-container :deep(.el-table__column) {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 响应式优化 */
@media (max-width: 768px) {
  .table-container :deep(.el-table) {
    min-width: 800px;
  }
}

/* 分页容器样式 */
.pagination-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px 0;
  background: #fff;
  border-radius: 8px;
  margin-top: 16px;
  box-shadow: 0 2px 8px rgba(25, 118, 210, 0.1);
}
</style>